<%@ page import="ar.com.photo_admin.domain.EventAlbum" %>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">	
	
		<!-- CSS to style the Guidely feature -->
	<link rel="stylesheet"
		href="${resource(dir:'css',file:'guidely.css')}" type="text/css" />
	
</head>
<body>
	<div class="page-header">
		<h1>
			<g:if test="${create}">
				<g:message code="eventAlbum.newAlbum" />
			</g:if>
			<g:else>
				<h1><g:message code="eventAlbum.editAlbum"/></h1>
			</g:else>
		</h1>
	</div>

	<g:if test="${flash.message}">
		<div class="alert alert-success">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.message}</div>  
		</div>  
	</g:if>
	
	<g:hasErrors bean="${eventAlbumInstance}">
		<g:eachError bean="${eventAlbumInstance}" var="error">
			<div class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a>
				<g:message error="${error}" />
			</div>
		</g:eachError>
	</g:hasErrors>
			
	<g:form name="albumForm" action="save">	 
		 <g:hiddenField name="id" value="${eventAlbumInstance?.id}" />
		 <g:hiddenField name="eventId" value="${eventAlbumInstance?.event.id}" />
		 <g:hiddenField id="hidden_cover_id" name="cover_photo_id" value=""/>
		 <g:hiddenField id="hidden_selected_photos_ids" name="selected_photos_id" value=""/>
	
		<div id="albumHeader" class="row">
			<div id="thumbnailContainer" class="span4">
				<g:if test="${eventAlbumInstance.coverPhoto}">
					<img id="coverPhotoImage"
						src="${eventAlbumInstance?.coverPhoto?.getPublishedUrl()}"
						class="coverPhoto thumbnail" name="${eventAlbumInstance?.coverPhoto?.id}"></img>
				</g:if>
				<g:else>
					<img id="coverPhotoImage"
						src="${resource(dir:'images', file: 'defaultImage.jpg')}"
						class="coverPhoto thumbnail" name="0"></img>
				</g:else>
			</div>

			<div class="span8">									
				<div >
					<div
						class="control-group ${hasErrors(bean: eventAlbumInstance, field: 'name', 'error')}">
						<label class="control-label" for="name"><g:message
								code="name" />
								<span class="required-indicator">*</span></label>
						<div class="controls">
							<g:field id="name" class="input-large" type="text" name="name" 
								value="${eventAlbumInstance?.name}" maxlength="25"
								placeholder="${message(code: 'name')}" required="" />
						</div>
					</div>
	
					<div
						class="control-group ${hasErrors(bean: eventAlbumInstance, field: 'description', 'error')}">
						<label class="control-label" for="description"><g:message
								code="description" /></label>
						<div class="controls">
							<g:textArea rows="3" maxlength="200"
								name="description" value="${eventAlbumInstance?.description}"
								placeholder="${message(code: 'description')}"></g:textArea>
						</div>				
					</div>					
				</div>
			</div>
		</div>
	</g:form>
			
	<div class="separator"></div>			
	
	<div id="btn-group" class="btn-group">						
		<g:isEventClientOrOwner eventId="${eventAlbumInstance?.event.id}">
			<button id="btn_save" form="albumForm" class="btn btn-success" onclick="albumController.setHiddenFields();"><g:message code="save" /></button>									
			<button id="btn_cancel" class="btn btn-success" ><g:message code="cancel" /></button>				
			<button id="btn_addAllToAlbum" class="btn btn-success" ><i class="icon-white"></i><span><g:message code="eventAlbum.addAllToAlbum" /></span></button>
			<button id="btnHelp" class="btn btn-info " ><g:message code="help" /></button>			
		</g:isEventClientOrOwner>
	</div>
	
	<div class="separator"></div>
	
	<h2><g:message code="event.photos.unselected"/></h2>
		
	<div id="noPhotosAvailable" class="alert alert-warning">  
		<a class="close" data-dismiss="alert">×</a>  
		<div class="message"><g:message code="event.no.available.photos"/></div>  
	</div>
					
	<div id="unselectedPhotosGridContainer" class="eventPhotosContainer row"> 
	    <div id="upload_gallery">
	    	<div class="row"  id="allPhotosContainer">
	    	</div>
	    </div>  
    </div>
    
    <div class="longSeparatorUsingBorder"></div>
    
	<h2><g:message code="event.photos.selected"/></h2>
			
	<!-- En este div se almacenaran las imagenes que se encuentran seleccionadas en el album -->							
	<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" class="row"></div>			
	
    <div class="separator"></div>
		
	<g:render template="/common/modalImageGallery" 
			  model="${[addToCartVisibility: false]}" />					
			
	<g:render template="albumCreateController" />		
			
	<g:javascript src="load-image.min.js" />								
	
	<g:javascript src="imagePreview.js" />
		
	<g:javascript src="model/Album.js" />
	<g:javascript src="model/Photo.js" />
	<g:javascript src="guidely.js" />
	
	<script type="text/javascript">
	jQuery(document).ready(function(){

		var albumId = "${eventAlbumInstance?.id}";
		var albumName = "${eventAlbumInstance?.name}";
		var albumDescription = "${eventAlbumInstance?.description}";								

		albumController = new EventAlbumCreateController(albumId, albumName, albumDescription);										
		albumController.loadUnselectedPhotos(${unselectedPhotos});
		albumController.loadSelectedPhotos(${selectedPhotos});		

		jQuery("#btn_cancel").click(function(){																
			var successUrl = "${createLink(controller: 'eventAlbum', action: 'cancel', id: eventAlbumInstance?.event?.id)}";
			window.location.replace(successUrl);
		});

		jQuery("#btn_addAllToAlbum").click(function(){
			
			albumController.addAllToAlbum();
		});
		
		imagePreview();
		
   	});
	</script>
	
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery('#btnHelp').click(function () {								
				initGuidely();				
			});	

			function initGuidely(){		

				guidely.clear();
				
				jQuery('#guidelyContainer').remove();
				jQuery('body').append('<div id="guidelyContainer"></div>');
				
				var coverIconUrl = "${resource(dir:'images', file: 'cover_s.png')}";
				guidely.add ({
					attachTo: '#coverPhotoImage'
					, anchor: 'middle-middle'
					, title: 'Portada del álbum!'
					, text: 'Ingrese una foto de portada para el álbum seleccionando en la foto al ícono : <img src="'+coverIconUrl+'" alt="image"> </img>'
				});

				// Solo agrega el paso en caso de que hayan fotos para agregar					
				if (albumController.getUnselectedIdFirstImage() != null){					
					guidely.add ({
						attachTo: '#'+albumController.getUnselectedIdFirstImage()
						, anchor: 'middle-middle'
						, title: 'Seleccione las fotos!'
						, text: 'Agregue la foto al álbum haciendo click sobre ella.'
					});
				}
													
				guidely.init ({ 
					showOnStart: true,
					welcome:false,											
					startTrigger: false });				
			}								
		});	
	</script>	
</body>
</html>